<template>
  <div class="app-level">
    <el-breadcrumb  separator="/" style="margin-top:10px">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
        <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
        <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    created () {
      this.getBreadcrumb()
    },
    data () {
      return {
        levelList: null
      }
    },
    methods: {
      getBreadcrumb () {
        let matched = this.$route.matched.filter(item => item.name)
        this.levelList = matched
      }
    },
    watch: {
      $route () {
        this.getBreadcrumb()
      }
    }
  }
</script>

<style>
  .app-level {
    margin-right:0px;
    height:35px;
    position:fixed;
    z-index:88;
    background:white;
    width:100%;
    border-bottom: 1px solid #dddddd;
  }

  .el-breadcrumb__inner a{
    text-decoration:none;
  }
</style>
